<template>
  <view class="house">
    <life-empty v-if="!houseList.length" url="/pkg-house/add-house/add-house" tip="您还没有认证房屋，请点击">
    </life-empty>
    <view class="houes-list" v-else>
      <house-item v-for="item in houseList" :key="item.id" :houseItem="item" @updateList="updateList">
      </house-item>
      <life-button @click="onButton" icon="../../static/icon/add.png" title="添加新房屋"></life-button>
    </view>
  </view>
</template>

<script>
  import {
    getHouseList
  } from '../../api/house.js'
  export default {
    data() {
      return {
        houseList: []
      }
    },
    methods: {
      updateList() {
        this.loadHouseList()
      },
      onButton() {
        uni.navigateTo({
          url: '/pkg-house/add-house/add-house'
        })
      },
      async loadHouseList() {
        const res = await getHouseList()
        this.houseList = res.data
      }
    },
    onLoad() {
      this.loadHouseList()
    }
  }
</script>

<style lang="scss" scoped>
  .house {
    height: 100%;
    background-color: #FAFAFA;
    padding-top: 30rpx;
    padding-bottom: 350rpx;
  }

  .houes-list {
    padding: 0 40rpx;
    overflow: hidden;
  }

  ::v-deep .u-swipe-action-item__content {
    background-color: unset !important;
  }

  ::v-deep .u-swipe-action-item {
    background-color: #CC655E;
    border-radius: 16rpx;
  }

  ::v-deep .u-swipe-action {
    margin-bottom: 20rpx;
  }
</style>
